<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
	<link rel="stylesheet" href="/css/index.css"/>
	<script src="/js/jquery-3.4.1.js"></script>
<!--	<script src="/js/main.js"></script>-->
	<link rel="stylesheet" href="/layui/css/layui.css"  media="all">
	<title th:text="${setting.siteName}+'-筛选列表'">易书网</title>
</head>
<body >

<!--引入 尾部片段-->
<div  th:replace="mall/common/mall_common :: header"></div>


<div class="list-main">
	<div class="container">
		<div class="bread" style="margin-bottom: 0;">当前位置：
			<a href="index.html">首页</a> >
			<a href="list.html">列表</a>
		</div>
		<ul class="select">
			<li class="select-list" th:each="classif:${classifyNode}" th:if="classif.classifyList!=null">
				<dl id="select1" th:id="'select'+${classifStat.index+1}">
					<dt th:text="${classif.classifyName}+': '">学校：</dt>
					<dd class="select-all selected" th:onclick="'javascript:choice('+${classifStat.index}+','+this+');'"><a href="#">全部</a></dd>
					<dd th:each="node:${classif.classifyList}"  th:onclick="'javascript:choice('+${classifStat.index}+','+this+');'"><a href="#" classifyData="" th:classifyData="${node.id}" th:text="${node.classifyName}">深圳大学</a></dd>
				</dl>
			</li>

			<li class="select-result">
				<dl id="selectData">
					<dt>已选条件：</dt>
					<dd class="select-no">暂时没有选择过滤条件</dd>
				</dl>
			</li>
		</ul>
		<div class="tabs book clearfix dataList">

			<dl  th:fragment="dataList" th:each="books:${booksList}">
				<dt><a href="detail.html" th:href="'detail.html?id='+${books.id}"><img th:src="${books.imageUrl}" src="/images/book.jpg" alt="" th:width="100px" th:height="150px" /></a></dt>
				<dd>
					<p><a href="detail.html"  th:href="'detail.html?id='+${books.id}" th:text="${books.bookName}">福尔摩斯探案全集</a></p>
					<p th:if="${books.isdiscount==1}" th:text="'价格：￥'+${books.price}">价格：￥25</p>
					<p th:if="${books.isdiscount==2}"><s  th:text="'价格：￥'+${books.price}">价格：￥25</s> <span th:text="'￥'+${books.discount}">￥7</span> </p>
				</dd>
			</dl>

			<dl >
				<dt><a href="detail.html"><img src="images/book.jpg" alt=""/></a></dt>
				<dd>
					<p><a href="detail.html">福尔摩斯探案全集</a></p>
					<p>数量：99</p>
					<p><s>价格：￥25</s> ￥7</p>
				</dd>

			</dl>

			<div class="clearfix"></div>


		</div>
		<div id="demo1" style="text-align: center"></div>

	</div>
</div>



<!--引入 尾部片段-->
<div  th:replace="mall/common/mall_common :: footer"></div>



<script src="/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
	var laypage;
	var layer;
	var bookData = {"page":'',"limit":'',"bookName":'',"classifyId":''};
	var bookName = [[${bookName}]]
	if(bookName!=null){
		bookData.bookName=bookName;
	}
	layui.use(['laypage', 'layer'], function() {
		laypage = layui.laypage
		layer = layui.layer;
		$("#dataList").click(function () {
			var data = $("#bookName").val();
			bookData.bookName=data;
			getAjax(bookData)
			return false;
		})
	})

	//数据总数
	var total =5;

	setTimeout(function () {
		getAjax(bookData);
	},100)
	function getAjax(bookData) {
		$.get("/books/booksListCount",bookData,function (res) {
			total = res.data;
			laypage.render({
				elem: 'demo1'
				,limit: 21
				,count:  total //数据总数
				,first: '首页'
				,last: '尾页'
				,jump: function(obj){
					bookData.page=obj.curr;
					bookData.limit=obj.limit;
					booksPage(bookData)
				}
			});
		},"json")
	}

	function booksPage(bookData) {
		$.get("/books/booksList",bookData,function (data) {
			$(".dataList").html(data);
		});
	}

	function counter() {
		if ($('.select-book li.selected').length > 0){
			$('.select-book .send').addClass('selected');
		}
		else
			$('.select-book .send').removeClass('selected');
		$('.select-book .send').attr('data-counter',$('li.selected').length);
	}

	var val = ["A","B","C","D","E","F","G","H","I","J","K","L"];

	function choice(index,doc){
		var indexVal = val[index];
		var $doc = $(doc)
		$doc.addClass("selected").siblings().removeClass("selected");
		if ($doc.hasClass("select-all")) {
			$("#select"+indexVal).remove();
		} else {
			var copyThisA = $doc.clone();
			if ($("#select"+indexVal).length > 0) {
				$("#select"+indexVal+" a").html($doc.text());
				$("#select"+indexVal+" a").attr("classifyData",$doc.children().attr("classifyData"));
			} else {
				$(".select-result dl").append(copyThisA.attr("id", "select"+indexVal));
			}
		}
		deleteTiaoJian(index)
		getData();
	}

	function deleteTiaoJian(index){
		var indexVal = val[index];
		$("#select"+indexVal).on("click", function () {
			$(this).remove();
			$("#select"+(index+1)+" .select-all").addClass("selected").siblings().removeClass("selected");
			getData()
		});
		shuaxing()
	}
	shuaxing()
	function shuaxing() {
		$(".select dd").on("click", function () {
			if ($(".select-result dd").length > 1) {
				$(".select-no").hide();
			} else {
				$(".select-no").show();
			}
		});
	}

	function getData() {
		var classifId = []
		$("#selectData a").each(function(i,v){
			classifId.push($(v).attr("classifyData"))
		});
		bookData.classifyId=classifId.join(",");
		getAjax(bookData);
	}


</script>

</body>
</html>